<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤管理 - OA办公系统</title>
    <link href="../css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/fontawesome.css">
    <link rel="stylesheet" href=../css/style.css">
    <script src="../js/jquery-3.6.0.js"></script>
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
    <div class="container mx-auto fade-in">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">考勤管理</h1>
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect">
                    <i class="fas fa-clock mr-2"></i>
                    <span onclick="daka()">打卡签到</span>
                </button>
                <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center btn-hover-effect">
                    <i class="fas fa-file-export mr-2"></i>
                    <span>导出报表</span>
                </button>
                <div class="relative">
                    <input type="text" placeholder="搜索考勤记录" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 考勤概览 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">本月出勤</p>
                        <h2 class="text-3xl font-bold text-gray-800">22天</h2>
                    </div>
                    <div class="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-calendar-check text-blue-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">出勤率 85%</p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">迟到</p>
                        <h2 class="text-3xl font-bold text-gray-800">2次</h2>
                    </div>
                    <div class="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-hourglass-half text-yellow-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>最近一次: 2023-06-12</span>
                        <span class="text-yellow-500">迟到15分钟</span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">请假</p>
                        <h2 class="text-3xl font-bold text-gray-800">3天</h2>
                    </div>
                    <div class="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-user-clock text-purple-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>年假剩余</span>
                        <span class="text-purple-500">7天</span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">加班</p>
                        <h2 class="text-3xl font-bold text-gray-800">12小时</h2>
                    </div>
                    <div class="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-business-time text-red-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>本月加班费</span>
                        <span class="text-red-500">¥600</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 考勤分类标签 -->
        <div class="bg-white rounded-lg shadow mb-6">
            <div class="flex border-b overflow-x-auto">
                <button class="px-6 py-3 text-blue-500 border-b-2 border-blue-500 font-medium">我的考勤</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">部门考勤</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">请假申请</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">加班申请</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">外出申请</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">考勤统计</button>
            </div>
        </div>

        <!-- 日期筛选 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex flex-wrap items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center">
                        <span class="text-gray-500 mr-2">日期范围:</span>
                        <input type="date" value="2023-06-01" class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="mx-2">至</span>
                        <input type="date" value="2023-06-30" class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button class="px-4 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200">
                        <i class="fas fa-filter mr-1"></i>
                        筛选
                    </button>
                    <button class="px-4 py-1 text-gray-500 hover:text-blue-500">
                        <i class="fas fa-redo-alt mr-1"></i>
                        重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 考勤记录表格 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <table class="w-full enhanced-table">
                <thead>
                    <tr class="bg-gray-50 text-left">
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">星期</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">上班时间</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">下班时间</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">工时</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                    </tr>
                </thead>
                <tbody id="kaoqin" class="divide-y divide-gray-200">
                    <!-- 考勤记录1 -->

                </tbody>
            </table>
        </div>
        <!-- 分页组件 -->
        <div class="mt-6">
        </div>
    </div>
<script>
    $(function (){
        console.log("页面加载时展示数据")
        getStuList(1)
    })
    function daka(){
        $.ajax({
            //请求地址
            url:"http://localhost:8081/empsys_war/attend",
            type:"get",
            ///请求参数
            data: {
                "method": "check",
                "employeeId":1
            },success:function(){
                getStuList(1)
            }
    })
    }
    //获取数据
    function getStuList(pageNum){
        $.ajax({
            //请求地址
            url:"http://localhost:8081/empsys_war/attend",
            type:"get",
            ///请求参数
            data:{
                "method":"getRecords",
                "pageNum":pageNum,
            },
            //返回是数据类型
            dataType:"json",
            success:function (data) {
                console.log(data)
                console.log("当前页面",data.pageNum)
                //清除表格
                $(`#kaoqin`).empty()
                //遍历集合展示数据
                for (const stu of data.data){
                    let bz;
                    if(stu.checkInTime<"09:00:00"){
                        bz="-";
                    }else {
                        bz="迟到"+stu.shicha+"分钟"
                    }
                    let coloer;
                    if (stu.status === "正常"){
                        coloer="green"
                    }else if(stu.status === "迟到"){
                        coloer="blue"
                    }else {
                        bz="早退"
                        coloer="red"
                    }
                    let tr=`<tr>
            <td>`+stu.date+`</td>
            <td>`+stu.xingqi+`</td>
            <td>`+stu.checkInTime+`</td>
            <td>`+stu.checkOutTime+`</td>
            <td>`+stu.gongshi+`</td>
            <td style="color: `+coloer+`">`+stu.status+`</td>
            <td>`+bz+`</td>
            <td>
            </td>
          </tr>`
                    $(`#kaoqin`).append(tr)
                }
                $(`.mt-6`).empty()
                //分页
                let upBut;
                if (data.pageNum==1) {
                    upBut=`<button disabled><</button>`
                }else {
                    upBut=`<button onclick="getStuList(`+(data.pageNum-1)+`)"><</button>`
                }
                $(`.mt-6`).append(upBut)
                let domnBut;
                if (data.pageNum==data.totalPage){
                    domnBut=`<button disabled>></button>`
                }else{
                    domnBut=`<button onclick="getStuList(`+(data.pageNum+1)+`)">></button>`
                }
                $(`.mt-6`).append(domnBut)
            }
        })
    }
</script>